<template>
  <div class="docs">
    <div class="store">
      <el-button type="info" size="small" @click="addStoreFn">添加知识库</el-button>
      <hr />
      <div class="store_list">
        <div class="row" v-for="store in storeList" :key="store._id" :class="{ active: storeIndex == store._id }"
          @click="clickStore(store)">
          <span>{{ store.title }}</span>
          <div class="icon">
            <el-tooltip class="box-item" effect="dark" content="添加文档" placement="bottom">
              <i @click="addDocsFn(store._id)">
                <el-icon>
                  <FolderAdd />
                </el-icon>
              </i>
            </el-tooltip>
            <el-tooltip class="box-item" effect="dark" content="编辑知识库" placement="bottom">
              <i @click="modifyStore(store)"><el-icon>
                  <Edit />
                </el-icon></i>
            </el-tooltip>
            <el-tooltip class="box-item" effect="dark" content="删除" placement="bottom">
              <i style="color: red" @click="delStoreFn(store._id)">
                <el-icon>
                  <Delete />
                </el-icon>
              </i>
            </el-tooltip>
          </div>
        </div>
      </div>
    </div>
    <div class="list">
      <div class="list_title">{{ currentStore }} -- 文档列表</div>
      <hr />
      <div class="docs_list">
        <div class="row" v-for="doc in docsList" :key="doc._id" :class="{ active: docIndex == doc._id }"
          @click="clickDocs(doc)">
          <div class="row_title">{{ doc.title }}</div>

          <div class="icon">
            <el-tooltip class="box-item" effect="dark" content="保存文档" placement="bottom">
              <i @click="saveDoc">
                <el-icon>
                  <FolderChecked />
                </el-icon>
              </i>
            </el-tooltip>
            <el-tooltip class="box-item" effect="dark" content="编辑文档" placement="bottom">
              <i @click="modifyDocs(doc)"><el-icon>
                  <Edit />
                </el-icon></i>
            </el-tooltip>
            <el-tooltip class="box-item" effect="dark" content="删除" placement="bottom">
              <i style="color: red" @click="delDocsFn(doc._id)">
                <el-icon>
                  <Delete />
                </el-icon>
              </i>
            </el-tooltip>
          </div>
        </div>
      </div>
    </div>
    <div class="article">
      <!-- <FullEdit ref="fullEditRefs" /> -->
      <Editor v-model="valueHtml" />

    </div>
  </div>
  <AddDrawer ref="AddDrawerRefs" :rowData="rowData" @addSuccess="getStoreFn" />
  <AddDocs ref="AddDocsRefs" v-model="isAddDocs" v-model:storeId="storeIndex" v-model:docData="docData"
    @addsuccess="getDocsFn" />
</template>

<script setup lang="ts">
// import FullEdit from '@/components/fullEdit/index.vue';
import Editor from '@/components/fullEdit/Editor.vue';
import AddDrawer from './c-comp/AddStoreDrawer.vue';
import AddDocs from './c-comp/AddDocs.vue';
import { getStoreApi, delStoreApi, getDocsApi, delDocsApi, editDocsApi } from '@/service/api';
import { ElMessage } from 'element-plus';
import { onMounted, ref } from 'vue';

const docsList = ref<any[]>([]);
const storeList = ref<any[]>([]);
const storeIndex = ref<string>('');
const docIndex = ref<string>('');
const AddDrawerRefs = ref();
const AddDocsRefs = ref();
const fullEditRefs = ref();
const rowData = ref();
const docData = ref();
const currentStore = ref();
const isAddDocs = ref(false);
const valueHtml = ref('');

const getStoreFn = async () => {
  const res: Res = await getStoreApi();
  if (res.code !== 200) return ElMessage.error(res.msg);
  storeList.value = res.data;
  storeIndex.value = res.data[0]?._id;
  // 获取知识库成功后获取文档
  getDocsFn();
};
const getDocsFn = async () => {
  const res: Res = await getDocsApi({ storeId: storeIndex.value });
  if (res.code !== 200) return ElMessage.error(res.msg);
  docsList.value = res.data;
  docIndex.value = res.data[0]?._id;
  // clickDocs(res.data[0]);
  return Promise.resolve();
};
const saveDoc = async () => {
  const res: Res = await editDocsApi({ id: docIndex.value, content: valueHtml.value });
  if (res.code !== 201) return ElMessage.error(res.msg);
  ElMessage.success(res.msg);
  await getDocsFn();
  clickDocs(res.data);
};
const addStoreFn = async () => {
  AddDrawerRefs.value.addStore();
};
const delStoreFn = async (id) => {
  const res: Res = await delStoreApi({ id });
  if (res.code !== 200) return ElMessage.error(res.msg);
  ElMessage.success(res.msg);
  getStoreFn();
};
const delDocsFn = async (id) => {
  const res: Res = await delDocsApi({ id });
  if (res.code !== 200) return ElMessage.error(res.msg);
  ElMessage.success(res.msg);
  getDocsFn();
};
const modifyDocs = (doc) => {
  docData.value = doc;
  isAddDocs.value = true;
  AddDocsRefs.value.isModify = true;
  AddDocsRefs.value.input = doc.title;
};
const modifyStore = (store) => {
  rowData.value = store;
  AddDrawerRefs.value.isModify = true;
  AddDrawerRefs.value.form.title = store.title;
  AddDrawerRefs.value.form.decs = store.decs;
  AddDrawerRefs.value.form.img = store.img;
  AddDrawerRefs.value.addStore();
};
const addDocsFn = (id) => {
  isAddDocs.value = true;
};

const clickStore = (store) => {
  storeIndex.value = store._id;
  currentStore.value = store.title;
  getDocsFn();
};
const clickDocs = (doc) => {
  docIndex.value = doc._id;
  valueHtml.value = doc.content;
};

onMounted(() => {
  getStoreFn();
});
</script>

<style scoped lang="less">
.docs {
  display: flex;
  height: 100%;

  .store,
  .list {
    flex: 0.15;
    background-color: white;
    border-radius: 5px;
    padding: 15px;
    margin-right: 15px;

    .store_list,
    .docs_list {
      .row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 5px 5px;

        &:hover {
          background-color: #ccc;
        }

        .icon {
          i {
            margin-left: 5px;
          }
        }
      }

      .active {
        background-color: #ccc;
      }
    }

    .list_title {
      --el-button-size: 24px;
      height: var(--el-button-size);
      padding: 0 11px;
      font-size: 12px;
      border-radius: calc(var(--el-border-radius-base) - 1px);
    }
  }

  .article {
    flex: 0.7;
    background-color: white;
    border-radius: 5px;
    padding: 15px;
  }
}
</style>
